<template>
  <div id="workspace-container">
    <div class="nav-area">
      <h2>活动管理系统</h2>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo navi-menu"
        background-color="#001529"
        text-color="#ccc"
        active-text-color="#2b85e4">
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>管理员管理</span>
          </template>
          <el-menu-item-group>
            <router-link to="/workspace/roleManaged">
              <el-menu-item index="1-1">
                角色管理
              </el-menu-item>
            </router-link>
            <router-link to="/workspace/adminUser">
              <el-menu-item index="1-2">管理员用户</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-opportunity"></i>
            <span>活动管理</span>
          </template>
          <el-menu-item-group>
            <router-link to="/workspace/activeManaged">
              <el-menu-item index="3-1">活动管理</el-menu-item>
            </router-link>
            <router-link to="/workspace/activeType">
              <el-menu-item index="3-2">活动类型</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">普通用户</el-menu-item>
            <el-menu-item index="2-2">主办方单位</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span>广告管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">PC端首页广告</el-menu-item>
            <el-menu-item index="4-2">移动端首页广告</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="6">
          <i class="el-icon-s-help"></i>
          <span slot="title">帮助中心</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content-area">
      <router-view />
      <div
        style="display: flex;flex-direction: row; justify-content: center; align-items: center; margin: 15% auto;"
      >
        <div>
          <h2>饼图</h2>
          <div id="pie-box" style="width: 400px;height:300px"></div>
        </div>
        <div>
          <h2>柱状图</h2>
          <div id="bar-box" style="width: 400px;height:300px;"></div>
        </div>
        <div>
          <h2>折线图</h2>
          <div id="line-box" style="width: 400px;height:300px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getActivityTypeCount } from "../api";
export default {
  name: "workSpace",
  data() {
    return {
      activeData: [],
      yData: [],
      xData: []
    };
  },
  mounted() {
    getActivityTypeCount().then(res => {
      let pieChart = echarts.init(document.getElementById("pie-box"));
      let barChart = echarts.init(document.getElementById("bar-box"));
      let lineChart = echarts.init(document.getElementById("line-box"));
      this.activeData = res.data.data;
      this.xData = this.activeData.map(r => r.name);
      this.yData = this.activeData.map(r => r.value);
      window.onresize = () => {
        pieChart.resize();
      };
      // console.log(this.activeData);
      pieChart.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            type: "pie",
            data: this.activeData
          }
        ]
      });
      barChart.setOption({
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          data: this.xData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",
            data: this.yData
          }
        ]
      });
      lineChart.setOption({
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: "category",
          data: this.xData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "line",
            data: this.yData
          }
        ]
      });
    });
  }
};
</script>

<style scoped>
#workspace-container {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: row;
}

.nav-area {
  min-width: 250px;
  height: 100vh;
  background: #001529;
}

.nav-area h2 {
  background: #2b85e4;
  line-height: 60px;
  color: #fff;
  text-align: center;
}

.navi-menu {
  width: 100%;
}

a {
  text-decoration: none;
}

.content-area {
  flex: 1;
  background: #ffffff;
}

.content-area h2 {
  color: #515a6e;
}

.el-menu-item.is-active {
  background-color: #2b85e4 !important;
  color: #fff !important;
}

</style>
